<template>
  <div id="app">
    <!-- <img src="./assets/logo.png"> -->
    <router-link to="home" active-class="select">首页</router-link>
    <router-link to="user/LilI" active-class="select">用户页面</router-link>
    <router-link to="news" active-class="select">新闻页面</router-link>
    <!-- <router-link :to="'mine/'+name+'/age/'+age+'/sex/'+sex" active-class='select'>个人中心</router-link> -->
    <!--       <router-link :to="'mine/'+name+'/'+age+'/'+sex" active-class='select'>个人中心</router-link> -->
    <router-link v-for="(i,index) in user" :key=index :to="'mine/'+i.name+'/'+i.age+'/'+i.sex" active-class="select">个人中心</router-link>
    <hr>
    <router-link to='/dataList' >  路由嵌套</router-link>


    <!-- 
  is解决固定搭配问题
      <ul>
      <li is='router-link' to="home">首页</li>
      <li is='router-link' to='user'>用户页面</li>
       <li is='router-link' to='news'>新闻页面</li>
    </ul>-->
    <router-view/>
    <!--     <v-nav></v-nav> -->
  </div>
</template>

<script>
//在js中 我们直接引入文件 用import
import nav from "@/components/nav";
//引用js 的时候 大部分库或者插件我们都用npm下载
//import $ from '.../jquery'   $.
export default {
  name: "App",
  data() {
    return {
      name: "haoliyou",
      age: 18,
      sex: "woman",
      user: [
        {
          name: "张三",
          age: 18,
          sex: "man"
        },
        {
          name: "路人甲",
          age: 18,
          sex: "man"
        },
        {
          name: "蹦迪飞",
          age: 18,
          sex: "woman"
        }
      ]
    };
  },
  components: {
    vNav: nav
  }
};
</script>

<style scoped>
/*@import url();  最公共的重置样式我们也可以放在 index.html*/
/* .router-link-active{
  color: red;
} */
.select {
  background: red;
  color: #ffffff;
}
a {
  color: green;
}
</style>
